<template>
  <div>
    <!-- 动态tabs -->
    <el-tabs v-model="activeIndex" type="card" @tab-remove="removeTab" @tab-click="handleTabsClick(editableTabsValue)">
      <el-tab-pane :key="item.name" :data="item" v-for="item in openTab" :label="item.name" :name="item.route" :closable="item.closable"> </el-tab-pane>
    </el-tabs>
    <el-main>
      <transition name="fade-transform" mode="out-in">
        <keep-alive :include="cachedViews">
          <router-view name="table"></router-view>
        </keep-alive>
      </transition>
    </el-main>
  </div>
</template>

<script>
export default {
  name: 'main',
  data() {
    return {
      key: 'value',
      cachedViews: [], //需要缓存的页面
    };
  },

  created() {
    // sessionStorage.removeItem('store');
    //在页面加载时读取sessionStorage里的状态信息
    console.log('%c Line:124 🍪 读取sessionStorage里的状态信息', 'font-size:18px;color:#ffffff;background:#669966', sessionStorage.getItem('store'));

    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))));
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      console.log('%c Line:35 🥶 触发刷新前缓存', 'font-size:18px;color:#ffffff;background:#ff6b6b');
      sessionStorage.setItem('store', JSON.stringify(this.$store.state));
    });
  },
  computed: {
    openTab() {
      return this.$store.state.openTab;
    },
    activeIndex: {
      get() {
        return this.$store.state.activeIndex;
      },
      set(val) {
        this.$store.commit('set_active_index', val);
      },
    },
  },
  mounted() {
    console.log('%c Line:40 🥚 刷新或第一次加载', 'font-size:18px;color:#ffffff;background:#8c7ae6');
    this.menuActive = 'console';
    // 刷新时以当前路由做为tab加入tabs
    // 当前路由不是首页时，添加首页以及另一页到store里，并设置激活状态
    // 当当前路由是首页时，添加首页到store，并设置激活状态
    const pageName = this.$route.meta.title;
    if (this.$route.path !== '/' && this.$route.path !== '/main/console') {
      //获取当前已保持的tabs记录
      // this.$store.commit('add_tabs', { route: '/main/console', name: pageName, closable: false });
      // this.$store.commit('add_tabs', { route: this.$route.path, name: pageName, closable: true });
      // this.$store.commit('set_active_index', this.$route.path);
    } else {
      //已存在缓存 则不必添加
      if (this.$store.state.openTab.length > 0) return;
      console.log('%c Line:47 🧑🏻‍💻 是首页', 'font-size:18px;color:#ffffff;background:#FFCC99', pageName);
      this.$store.commit('add_tabs', { route: '/main/console', name: pageName, closable: false });
      this.$store.commit('set_active_index', '/main/console');
      this.$router.push('/main');
    }
  },
  methods: {
    handleTabsClick(tab) {
      console.log('%c Line:136 🍩 tab', 'font-size:18px;color:#ffffff;background:#6666FF', tab);
      console.log('tab', tab);
      console.log('active', this.activeIndex);
      this.$router.push({ path: this.activeIndex });
    },
    removeTab(targetName) {
      console.log('tabRemove', targetName);
      //首页不删
      if (targetName == '/main/console') {
        return;
      }
      this.$store.commit('delete_tabs', targetName);
      if (this.activeIndex === targetName) {
        // 设置当前激活的路由
        if (this.openTab && this.openTab.length >= 1) {
          console.log('=============', this.openTab[this.openTab.length - 1].route);
          this.$store.commit('set_active_index', this.openTab[this.openTab.length - 1].route);
          this.$router.push({ path: this.activeIndex });
        } else {
          this.$router.push({ path: '/main/console' });
        }
      }
    },
  },
  watch: {
    $route(to) {
      console.log('%c Line:180 ❤️‍🔥❤️‍🔥 去哪个路由', 'font-size:18px;color:#ffffff;background:#6ec1c2', to);
      //判断路由是否已经打开
      //已经打开的 ，将其置为active
      //未打开的，将其放入队列里
      const pageName = to.meta.title;
      let flag = false;
      for (let item of this.openTab) {
        console.log('item.name', item.name);
        console.log('t0.name', pageName);
        if (item.name === pageName) {
          console.log('%c Line:99 👾 已打开路由to.path', 'font-size:18px;color:#ffffff;background:#6ec1c2', to.path);
          this.$store.commit('set_active_index', to.path);
          flag = true;
          break;
        }
      }
      //没有添加过 则添加
      if (!flag) {
        console.log('to.path', to.path);
        this.$store.commit('add_tabs', { route: to.path, name: pageName, closable: true });
        this.$store.commit('set_active_index', to.path);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// 动画效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

<style scoped>
/deep/.el-main {
  padding: 20px;
  background-color: #edf0fa;
  height: calc(100vh - 60px - 60px - 41px);
}
/deep/.el-tabs {
  height: 40px;
  box-sizing: border-box;
  border: none;
}
/*/deep/ .el-tabs__nav-wrap {
  height: 40px;
}
/deep/ .el-tabs__nav-scroll .el-tabs__nav {
  border: none;
}
/deep/ .el-tabs__nav .el-tabs__item {
  height: 40px;
  line-height: 40px;
} */
</style>
